<template>
  <div class="w-full h-full flex flex-col ">
    <n-card>
      <n-form
          inline
          :label-width="80"
          label-placement="left"
          :model="formValue"
          :rules="rules"
          :size="size"
          ref="formRef"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="名称" path="user.name" class="w-200px">
              <n-input v-model:value="formValue.name" placeholder="输入名称"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="分类" path="fenlei" class="w-200px">
              <n-select v-model:value="formValue.fenlei" :options="fenleioptions"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="状态" path="status" class="w-200px">
              <n-select v-model:value="formValue.status" :options="statusoptions"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item class="w-200px">
              <n-button-group>
                <n-button @click="searchFunc">
                  <n-icon>
                    <Search32Filled></Search32Filled>
                  </n-icon>
                  查询
                </n-button>
                <n-button @click="handleReset">
                  <n-icon>
                    <ArrowReset32Filled></ArrowReset32Filled>
                  </n-icon>
                  重置
                </n-button>
                <n-button @click="handleCreate">
                  <n-icon>
                    <Add16Filled></Add16Filled>
                  </n-icon>
                  新建
                </n-button>
              </n-button-group>
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
    <div class="flex w-full flex-1 justify-center overflow-hidden">
      <div class="w-200px">
        <n-card class="w-full h-full">
          <n-tree
              block-line
              :data="treeData"
              :node-props="nodeProps"
              selectable
              :on-load="handleLoad"
          />
        </n-card>
      </div>
      <div class="flex-1 h-full flex flex-col overflow-y-auto overflow-x-hidden">
        <div class="w-full flex-1 overflow-hidden">
          <n-card class="w-full h-full">
            <flextable :column.sync="columns" :tabledata="tabledata"></flextable>
          </n-card>
        </div>
        <div class="w-full juzhong1">
          <n-card class="w-full h-full juzhong1">
            <fenye @change="getDataList" ref="fenyeref" :total="total"></fenye>
          </n-card>
        </div>
      </div>
    </div>
    <Model ref="Modelref" @shuaxin="shuaxin"></Model>
  </div>
</template>

<script setup name="Menumanager">
import {useRoute, useRouter} from "vue-router";
import {Add16Filled, ArrowReset32Filled, Search32Filled} from "@vicons/fluent"
import {NButton} from "naive-ui"
import http from "@/request/request"
import Model from "./model.vue"

const router = useRouter()
const route = useRoute()
const fenyeref = ref(null)
const formRef = ref(null)
const Modelref = ref(null)
//表单数据
const formValue = ref({})
const rules = ref({})
const size = ref("medium")
const tabledata = ref([])
const total = ref(1)
const treeData = ref([])
const columns = ref([
  {
    title: "序号", key: "index", show: true, align: "center", width: 60, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "菜单名称", key: "name", show: true,},
  {
    title: "分类", key: "fenlei", show: true, render: (rowData, rowIndex) => {
      return rowData["fenlei"] === 1 ? "目录" : "外链"
    }
  },
  {title: "排序", key: "paixu", show: true,},
  {
    title: "状态", key: "status", show: true, render: (rowData, rowIndex) => {
      return rowData["status"] === 1 ? "启用" : "停用"
    }
  },
  {
    title: "描述", key: "desc", show: true, render: (rowData, rowIndex) => {
      return h("div", {}, {
        default() {
          return rowData["desc"]
        }
      })
    },
  },
  {
    title: "详情", key: "action", width: 60, show: true, align: "center", render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", onClick: () => {
            handelView(rowData, rowIndex)
          }, class: {"mx-1": true}, type: "primary"
        }, {
          default: () => {
            return "详情"
          }
        }),
      ])
    }
  },
  {
    title: "编辑", key: "action", width: 60, show: true, align: "center", render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", onClick: () => {
            handelEdit(rowData, rowIndex)
          }, class: {"mx-1": true}, type: "info"
        }, {
          default: () => {
            return "编辑"
          }
        }),

      ])
    }
  },
  {
    title: "删除", key: "action", width: 60, show: true, align: "center", render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {size: "small", class: {"mx-1": true}, type: "error"}, {
          default: () => {
            return "删除"
          }
        }),
      ])
    }
  },
])
const nodeProps = ({option}) => {
  return {
    onClick() {
      parentData.value = option.key
      getDataList()
    },
  }
}
const parentData = ref("")
const fenleioptions = ref([
  {label: "目录", value: "1"},
  {label: "外链", value: "2"},
])
const statusoptions = ref([
  {label: "启用", value: "1"},
  {label: "停用", value: "2"},
])
// 点击新建
const handleCreate = () => {
  Modelref.value.init("add")
}
// 点击查看
const handelView = (data, index) => {
  Modelref.value.init("view", {...data})
}
// 点击编辑
const handelEdit = (data, index) => {
  Modelref.value.init("edit", {
    ...data,
    fenlei: data.fenlei.toString(),
    cache: data.cache.toString(),
    status: data.status.toString(),
  })
}

// 获取表格数据
const getDataList = () => {
  const params = {
    ...formValue.value,
    parent: parentData.value,
  }
  http.menulist(params).then(res => {
    if (res.status === 200) {
      tabledata.value = res.data.items
      total.value = res.data.total
    }
  })
}

// 点击搜索
const searchFunc = () => {
  console.log("点击查询", formValue.value)
  fenyeref.value.changeoption({page: 1,})
}
const shuaxin = (status = "add") => {
  console.log("弹窗刷新回调")
  if (status === "add") {
    fenyeref.value.changeoption({page: 1,})
  } else {
    fenyeref.value.changeoption({})
  }
}
// 点击重置
const handleReset = () => {
  Object.keys(formValue.value).forEach(item => {
    formValue.value[item] = null
    searchFunc()
  })
}

// 获取tree的数据
const gettreedatafunc = (parentid = null) => {
  const params = {
    parent: parentid,
  }
  http.menufilter(params).then(res => {
    if (res.data.code === 0) {
      treeData.value = res.data.items.map(item => {
        return {label: item.name, key: item.id, isLeaf: false,}
      })
    }
  })
}
const handleLoad = (option) => {
  console.log("触发handleLoad", option)
  return new Promise((resolve) => {
    const config = {
      parent: option.key,
    }
    http.menufilter(config).then(res => {
      if (res.data.code === 0) {
        if (res.data.items.length === 0) {
          option.isLeaf = true
        } else {
          option.children = res.data.items.map(item => {
            return {label: item.name, key: item.id, isLeaf: false,}
          })
        }
        resolve()
      }
    })
  })
}
// 生命周期区域
// getDataList()
gettreedatafunc()
</script>

<style>

</style>
